<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-1.8.2.js"></script>
        <script src="js/jquery.localize.js"></script>
        <script src="js/knockout-2.1.0.js"></script>
        <script src="js/idiomas.js" ></script>        
        <script src="js/modelo.js"></script>		        
        


        <title>PC DAW</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
        <noscript>
        <meta http-equiv="refresh" content="0; noscript.html"/>
        </noscript>

    </head>
    <body>


        <div id="basket" class="pcdawgroup basket ">

            <div class="grouptitle" data-localize="cesta">
                Cesta
            </div>
            <div class="groupcontent">

                <div class="description" id="description" data-localize="cesta_vacia" data-bind="ifnot: $root.hayCompra">
                    Cesta vacía
                </div>

                <table id="basketTable">
                    <thead>
                        <tr data-bind="visible: $root.hayCompra">
                            <th data-localize="productos">Productos</th ><th data-localize="subtotal">Subtotal</th><th></th>
                        </tr>
                    </thead>

                    <tbody>
                        <!-- ko foreach:$root.categoriasArticulos.elementos -->    
                            <!-- ko foreach:elementos -->    
                            <tr data-bind="visible:cantidad">
                                    <td data-bind="text:valor"></td>
                                    <td>
                                        <span data-bind="text:subtotal">
                                            
                                        </span>€
                                    </td>
                                    <td>
                                        <a href="#" data-localize="eliminar">Eliminar(X)</a>
                                    </td>
                                </tr>
                            <!-- /ko -->
                        <!-- /ko -->
                    </tbody>
                    <tfoot data-bind="visible: $root.hayCompra">
                        <tr >
                            <td  class="sumline" colspan=2></td>
                        </tr>
                        <tr >
                            <th>Total:</th><td><span data-bind="text: $root.total"></span>€</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <div class="cornerplaceholder"></div>

            <div id="buttonDiv" data-bind="visible: $root.hayCompra">
                <input type="submit" value="Submit Order"/>
                <input type="reset" value="Reset"/>
            </div>
            <div id="logobar">
                <img src="images/logo.png"  >
                <span id="tagline">PC</span>
                <div id="idiomas">
                    <img src="images/flags_Spain.png" id="flag_es"/>
                    <img src="images/flags_United_Kingdom.png" id="flag_en"/>
                </div>

            </div>       
        </div>

        <div ></div>
        <form action="/comprar" method="post">
            <div id="datosArticulos" data-bind="foreach: $root.categoriasArticulos.elementos">

                <div class="pcdawgroup">
                    <div class="grouptitle categoria_vacia categoria" data-bind="text:valor, click:receiveArticulos">
                    </div>
                    <div data-bind="slideVisible:verArticulos, duracion:600">
                        <!-- ko foreach:elementos -->
                        <div class="groupcontent">
                            <label class="pcdawname">
                                <span data-bind="text:valor"></span>
                                <span data-bind="text:precioArticulo"></span>€
                            </label>
                            <span>
                                <input type="text" name="cantidad" data-bind="value:cantidad"/>
                                <span class="groupcontent2 subtotal" data-bind="visible:cantidad"> (<span data-bind="text:subtotal"></span>€) </span>
                            </span>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>

            </div>
        </form>
    </body>
</html>
